<!DOCTYPE html>
<html>
  <head>
    <title>用户登录</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/themes/gray/easyui.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/themes/icon.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/themes/color.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/default.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}"/>
	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.easyui.min.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='js/locale/easyui-lang-zh_CN.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
  </head>

	<body style="width:100%;height:100%;">
		<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> 
			<img style="position:fixed;" src="{{ url_for('static', filename='images/user_login_bg.jpg') }}" height="100%" width="100%" /> 
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-offset-2 col-md-8">
					<div class="transparent">
						<div class="content" style="text-align:center;">
							<h2 class="text-primary" style="font-family:'Microsoft YaHei';">
							Web安全与防护技术
							</h2>
							<br>
							<form id="loginForm" class="form-horizontal" role="form" method="post">
   								<div class="form-group">
      								<label for="username" class="col-sm-3 control-label">
      								<span class="glyphicon glyphicon-user"></span>用户名
      								</label>
      								<div class="col-sm-6">
         								<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
      								</div>
   								</div>
   								<div class="form-group">
      								<label for="password" class="col-sm-3 control-label">
      								<span class="glyphicon glyphicon-lock"></span>密码
      								</label>
      								<div class="col-sm-6">
         								<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
      								</div>
   								</div>
   								<div class="form-group">
      								<div class="col-sm-12">
         								<button id="loginBtn" type="button" class="btn btn-success" style="margin-top:5px;width:100px;">登录</button>
     								</div>
   								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script language="javascript">
		    $(function(){
        		$("#loginBtn").click(function(){
        			var un = $('#username').val();
        			var ps = $('#password').val();
        			if(un=='') {
        				$.messager.alert('提示', '请输入用户名！', 'info');
        				return;
        			}
        			if(ps=='') {
        				$.messager.alert('提示', '请输入密码！', 'info');
        				return;
        			}
        			
        			$.post('validate', {username:un, password:ps}, function(data, status){
						if(data && data=='success') {
							$.messager.alert('提示', '登录成功！', 'info');
						}
						else if(data && data=='failed') {
							$.messager.alert('提示', '用户名或密码错误！', 'info');
						}
						else {
							$.messager.alert('提示', '登录失败！', 'info');
						}
					});
        		});
			});
		</script>
	</body>
</html>
